<template>
    <div v-show="itemShow">
        <div class="top3 top3_1">
            <div class="top-head">
                <div class="top-logo">TOP3</div>
                <div class="top-title">隐患与预警</div>
            </div>
            <div v-for="(item,index) in hiddenDangerList"
                :key="item.key"
                :class="['top-body',{'top-even': (index+1)% 2 === 0}]">
                <div class="top-logo">{{'0' + (index+1)}}</div>
                <div class="top-title">{{item.name}}</div>
            </div>
        </div>
        <div class="top3 top3_2">
            <div class="top-head">
                <div class="top-logo">TOP3</div>
                <div class="top-title">高危隐患区域</div>
            </div>
            <div v-for="(item,index) in highRiskAreaList"
                :key="item.key"
                :class="['top-body',{'top-even': (index+1)% 2 === 0}]">
                <div class="top-logo">{{'0' + (index+1)}}</div>
                <div class="top-title">{{item.name}}</div>
            </div>
        </div>
        <div class="top3 top3_3">
            <div class="top-head">
                <div class="top-logo">TOP3</div>
                <div class="top-title">风险社会单位</div>
            </div>
            <div v-for="(item,index) in riskCompanyList"
                :key="item.key"
                :class="['top-body',{'top-even': (index+1)% 2 === 0}]">
                <div class="top-logo">{{'0' + (index+1)}}</div>
                <div class="top-title">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>
<script>
// 风险分析.
export default {
    name: 'RiskList',
    props: {
        hiddenDangerList: Array,
        highRiskAreaList: Array,
        riskCompanyList: Array,
        itemShow: Boolean
    }
};
</script>

<style scoped>
.top3_1 {
    top: 2rem;
    left: 0.3rem;
}

.top3_2 {
    top: 2rem;
    left: 5.3rem;
}

.top3_3 {
    top: 2rem;
    left: 10.3rem;
}

/* @media screen and (max-width:860px) {
    .top3_3 {
        top: 3rem;
        left: 0.3rem;
    }
}

@media screen and (max-width:600px){
    .top3_2 {
        top: 3rem;
        left: 0.3rem;
    }
    .top3_3 {
        top: 6rem;
        left: 0.3rem;
    }
} */

.top3 {
    width: 268px;
    height: 144px;
    position: absolute;
    border: 1px solid rgb(2, 129, 190);
}

.top3 .top-head {
    height: 25%;
    width: 100%;
    background-color: rgb(10, 38, 64);
    float: left;
}

.top3 .top-head .top-logo {
    height: 16px;
    width: 33px;
    background-color: rgb(0, 160, 233);
    margin-top: 10px;
    margin-left: 10px;
    padding-left: 2px;
    font-size: 12px;
    float: left;
}

.top3 .top-head .top-title {
    float: left;
    margin-left: 10px;
    margin-top: 6px;
    color: rgb(1, 147, 214);
}

.top3 .top-body {
    height: 25%;
    width: 100%;
    background-color: rgb(10, 68, 108);
    float: left;
}

.top-body.top-even {
    background-color: rgb(11, 57, 93);
}

.top3 .top-body .top-logo {
    float: left;
    color: rgb(122, 208, 245);
    font-size: 12px;
    margin-left: 20px;
    margin-top: 9px;
}

.top3 .top-body .top-title {
    float: left;
    color: rgb(122, 208, 245);
    font-size: 15px;
    margin-left: 20px;
    margin-top: 6px;
}
</style>
